<script lang="ts" setup>
  import { watch } from 'vue';
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { Message, Modal } from '@arco-design/web-vue';
  import { deleteStaff, queryStaffs } from '@/api-new/institutional-personnel';
  import EditModal from './edit-modal.vue';

  const props = defineProps({
    instId: String,
  });

  // 定义表格列
  const columns = [
    {
      title: '人员ID',
      dataIndex: 'staffId',
    },
    {
      title: '人员姓名',
      dataIndex: 'staffName',
    },
    {
      title: '人员角色',
      dataIndex: 'roles',
    },
    {
      title: '手机号码',
      dataIndex: 'phoneNo',
    },
    {
      title: '人员状态',
      dataIndex: 'statusDesc',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const page = usePageTable({
    table: {
      fakePage: true,
      getQueryParams() {
        return {
          ...page.form?.state,
          instId: props.instId,
        };
      },
      apiFun: queryStaffs,
      columns,
      immediate: false,
    },
  });

  watch(
    () => props.instId,
    (newval) => {
      if (newval) {
        page.reload();
      }
    }
  );
  // 处理删除
  const handleDelete = async (record: any) => {
    Modal.confirm({
      title: '确定删除',
      content: `确定要删除员工${record.staffName}吗？`,
      okText: '确定',
      cancelText: '取消',
      onBeforeOk(done) {
        deleteStaff(record.staffId)
          .then(() => {
            done(true);
            page.reload();
            Message.success('删除成功！');
          })
          .catch(() => {
            done(false);
          });
      },
    });
  };

  const handler = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });
</script>

<template>
  <div class="flex flex-col">
    <TableLayout v-bind="page.bindProps" @create="handler.showAdd">
      <!-- <template #searchForm="{ state }">
        <a-form-item field="name" label="姓名">
          <a-input v-model="state.name" placeholder="请输入" allow-clear />
        </a-form-item>
        <a-form-item field="phone" label="号码">
          <a-input v-model="state.phone" placeholder="请输入" allow-clear />
        </a-form-item>
      </template> -->

      <template #action="{ record }">
        <a-space>
          <a-button size="small" type="text" @click="handler.showEdit(record)">
            编辑
          </a-button>
          <a-button
            size="small"
            type="text"
            status="danger"
            @click="handleDelete(record)"
          >
            删除
          </a-button>
        </a-space>
      </template>
    </TableLayout>

    <!-- 编辑弹窗 -->
    <EditModal :inst-id="props.instId" v-bind="handler.bindProps" />
  </div>
</template>

<style scoped></style>
